<!DOCTYPE html>
<html lang="en">
<head>
	<title>NetData Dashboard</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="author" content="costa@tsaousis.gr">

	<script>var netdataTheme = 'slate';</script>
	<script type="text/javascript" src="dashboard.js"></script>
</head>
<body>

<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
	<div style="font-size: 7vw;">why netdata?</div>
	<br/>
	<div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>


	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
		<li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="gauge">

			<div style="display: inline-block; width: 35.8%">
				<div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
				<br/>
				<div data-netdata="example.random2"
						data-dimensions="random"
						data-chart-library="gauge"
						data-gauge-max-value="32767"
						data-width="100%"
						data-after="-600"
						data-points="600"
						data-title="1/second (netdata&nbsp;default)"
						data-units="important metric"
						data-colors="#5A5"
						></div>
			</div>
			<div style="display: inline-block; width: 50%">
				<div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
				<div data-netdata="example.random2"
						data-dimensions="random"
						data-chart-library="gauge"
						data-gauge-max-value="32767"
						data-width="45%"
						data-after="-600"
						data-points="40"
						data-title="Updates Every 15&nbsp;Sec"
						data-units="important metric"
						data-colors="#C55"
						></div>
				<div data-netdata="example.random2"
						data-dimensions="random"
						data-chart-library="gauge"
						data-gauge-max-value="32767"
						data-width="45%"
						data-after="-600"
						data-points="2"
						data-title="Updates Every 5&nbsp;Mins"
						data-units="important metric"
						data-colors="#C55"
						></div>
			</div>
		</div>
		<div role="tabpanel" class="tab-pane" id="easypiechart">

			<div style="display: inline-block; width: 25%">
				<div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
				<br/>
				<div data-netdata="example.random2"
						data-dimensions="random"
						data-chart-library="easypiechart"
						data-easypiechart-max-value="32767"
						data-width="100%"
						data-after="-600"
						data-points="600"
						data-title="1/second (netdata&nbsp;default)"
						data-units="important metric"
						data-colors="#5A5"
						></div>
			</div>
			<div style="display: inline-block; width: 40%">
				<div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
				<div data-netdata="example.random2"
						data-dimensions="random"
						data-chart-library="easypiechart"
						data-easypiechart-max-value="32767"
						data-width="45%"
						data-after="-600"
						data-points="40"
						data-title="Updates Every 15&nbsp;Sec&nbsp;(<a href='https://github.com/OpenTSDB/opentsdb.net/blob/gh-pages/docs/source/user_guide/utilities/tcollector.rst#collecting-lots-of-metrics-with-tcollector' target='_blank'>OpenTSDB</a>)"
						data-units="important metric"
						data-colors="#C55"
						></div>
				<div data-netdata="example.random2"
						data-dimensions="random"
						data-chart-library="easypiechart"
						data-easypiechart-max-value="32767"
						data-width="45%"
						data-after="-600"
						data-points="2"
						data-title="Updates Every 5&nbsp;Mins&nbsp;(your&nbsp;NMS)"
						data-units="important metric"
						data-colors="#C55"
						></div>
			</div>
		</div>
	</div>
	<div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
	<div data-netdata="example.random2"
			data-dimensions="random"
			data-dygraph-theme="sparkline"
			data-width="100%"
			data-height="20vh"
			data-after="-600"
			data-points="600"
			data-title="1/second (netdata&nbsp;default)"
			data-units="something"
			data-colors="#888"
			></div>
</div>
</body>
</html>
